import React, { Component, Fragment } from 'react';
import { Card, Row, Col, Modal  } from 'antd';

import './ui.less';

class Gallery extends Component {
	state={
		visible: false,
		currentImg: ""
	}
	openGallery = (imgSrc) => {
		this.setState({
			visible: true,
			currentImg: '/gallery/'+imgSrc
		})
	}
	render(){
		const imgs = [
			['1.png','2.png','3.png','4.png'],
			['6.png','7.png','8.png','9.png'],
			['11.png','12.png','13.png','14.png'],
			['16.png','17.png','18.png','19.png'],
			['21.png','22.png','23.png','24.png','25.png'],
			['5.png','10.png','15.png','20.png'],
		]
		const imgList = imgs.map((list,findex)=> list.map((item,index)=>
			<Card
				key={findex+index}
				style={{marginBottom: 10}}
				cover={<img src={'/gallery/'+item} alt="" />}
				onClick={()=>this.openGallery(item)}
			>
				<Card.Meta
					title="React"
					description="imooc good"
				/>
			</Card>
		))
		return(
			<Fragment>
				<Row gutter={10}>
					<Col md={4}>
						{imgList[0]}
					</Col>
					<Col md={4}>
						{imgList[1]}
					</Col>
					<Col md={4}>
						{imgList[2]}
					</Col>
					<Col md={4}>
						{imgList[3]}
					</Col>
					<Col md={4}>
						{imgList[4]}
					</Col>
					<Col md={4}>
						{imgList[5]}
					</Col>
				</Row>
				<Modal
					title="图片画廊"
					width={300}
					height={500}
					visible={this.state.visible}
					onCancel={()=>{this.setState({
						visible: false
					})}}
					footer={null}
				>
					<img src={this.state.currentImg} alt="" style={{width: '100%'}} />
				</Modal>
			</Fragment>
		)
	}
}

export default Gallery;